<template>
  <el-row class="video-display">
    <el-col :span="4" class="video-display-col" style="background: rgb(48, 65, 86);">
      <div :class="['menu-item', year === item.year ? 'menu-item-active' : '']" v-for="item in VideoQsInfoList">
        <div class="menu-item-head" @click="itemClick(item)">
          <div class="menu-label-year">{{ item.year + "年" }}</div>
          <span
            :class="[item.show ? 'el-icon-caret-top' : 'el-icon-caret-bottom']"
          ></span>
        </div>
        <div class="menu-child" v-show="item.show">
          <div :class="['menu-label-qs', item.year === year && sub.videoQs === qs ? 'menu-label-active' : '']" v-for="sub in item.videoInfoList">

            <span @click="itemClickQs(item, sub)">   {{ "第" + sub.videoQs + "期" }} </span>

          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="20" class="video-display-col">
      <div class="content">
        <div class="content-con">
          <div class="content-menu">
            <el-row>
              <el-col :span="24">
                <div class="content-menu-title">{{ VideoQsInfo.videoTitle }}</div>
              </el-col>
              <el-col :span="24">
                <div class="content-menu-date" >   {{ "第" + VideoQsInfo.videoQs + "期" }}  日期: {{ VideoQsInfo.videoDay }}</div>
              </el-col>
            </el-row>
          </div>
          <div class="content-video">
            <video controls  :src="uploadUrl+VideoQsInfo.videoUrl" preload></video>
          </div>
          <el-row>
            <el-col :span="24">
              <div v-html="richTextContent"> </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {getapiaaaa, listVideoQs} from "@/api/system/VideoInfo";

export default {
  name: "video-display",
  mixins: [],
  props: {},
  components: {},
  computed: {},
  data() {
    return {
      richTextContent:"",
      uploadUrl: process.env.VUE_APP_BASE_API,
      VideoQsInfoList: [],
      aaaa: "",
      date: new Date().toLocaleDateString(),
      menusList: [
        {
          label: "2023年",
          value: 1,
          show: false,
          children: [
            {
              label: "第一期",
              value: 1,
            },
            {
              label: "第二期",
              value: 2,
            },
          ],
        },
        {
          label: "2024年",
          value: 2,
          show: false,
          children: [
            {
              label: "第一期",
              value: 1,
            },
            {
              label: "第二期",
              value: 2,
            },
          ],
        },
        {
          label: "2025年",
          value: 3,
          show: false,
          children: [
            {
              label: "第一期",
              value: 1,
            },
            {
              label: "第二期",
              value: 2,
            },
          ],
        },
      ],
      dataList: [
        {
          label: "视频名称1",
          id: 1,
          video: "xxx",
        },
      ],

      VideoQsInfo: {},
      year: '',
      qs: ''

    };
  },
  mounted() {
  },
  created() {
    this.getList();
    this.getaaa();

  },
  methods: {
    getaaa(){
      getapiaaaa().then(response => {
        this.aaaa=response.msg;
      });

    },
    getList() {
      this.loading = true;
      listVideoQs().then(response => {
        response.data.forEach(v => {
          v.show = false;
        })
        this.VideoQsInfoList = response.data;
        const lastOne = response.data[response.data.length - 1];

        lastOne.show = true;
        this.itemClickQs(lastOne);
      });
    },
    itemClick(item) {
      item.show = !item.show;
    },
    itemClickQs(lastOne, subItem) {
      const {year, videoInfoList} = lastOne;
      const videoInfo = subItem ? subItem : videoInfoList[videoInfoList.length - 1];
      const videoQs = videoInfo.videoQs
      this.year = year;
      this.qs = videoQs;
      console.log(videoInfo)
      this.VideoQsInfo = videoInfo;
      this.richTextContent= videoInfo.videoContent;
      var iframe = document.getElementById('myIframe');
      iframe.contentWindow.location.reload();


    }
  },
};
</script>
<style lang="scss">
.video-display {
  height: 100vh;

  &-col {
    height: 100%;
    overflow-y: scroll;
  }

  .menu {
    &-label {
      &-active{
        color: #71e2a3;
        background: #001528;
      }
      &-qs{
        font-size: 14px;
        padding: 5px 10px;
        padding-left: 20px;
        cursor: pointer;
      }

      &-year{
        font-size: 22px;
      }
      padding: 10px 5px;
      cursor: pointer;
    }

    &-item {
      color: #fff;
      &-active{
        color: white;

      }
      &-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 10px;
        cursor: pointer;
      }
    }

    &-child {
    }
  }

  .content {
    height: 100%;
    padding: 15px;
    overflow-y: scroll;

    //&-con {
    //  flex: 1;
    //  display: flex;
    //  padding: 20px 0;
    //}
    video{
      object-fit: cover;
      object-position: center center;
      width: 100%;
      height: calc(100vh - 141.91px);
    }

    &-menu {
      &-title {
        font-size: 37px;
        font-weight: bold;
      }
      &-date{
        font-size: 14px;
        color: #707070;
        padding: 10px 0;
      }

      width: 100%;
      padding: 20px 0;
    }



    &-video {
      width: 100%;
      background: #ccc;


    }
  }

  .video-play {
    height: 100%;
    width: 100%;
  }
}
</style>
